<template>
  <el-card shadow="hover" style="height: 100%;" :body-style="{height:'100%',background:'#282c34',}">
    <div class="item9">
      <span>title</span>
    </div>
  </el-card>
</template>

<script setup lang="ts" name="1_boxBorder">

</script>

<style scoped lang="less">
.item9 {
  width: 400px;
  padding-top: 12%;
  background: linear-gradient(to left, #2CD5FF, #2CD5FF) left top no-repeat,
  linear-gradient(to bottom, #2CD5FF, #2CD5FF) left top no-repeat,
  linear-gradient(to left, #2CD5FF, #2CD5FF) right top no-repeat,
  linear-gradient(to bottom, #2CD5FF, #2CD5FF) right top no-repeat,
  linear-gradient(to left, #2CD5FF, #2CD5FF) left bottom no-repeat,
  linear-gradient(to bottom, #2CD5FF, #2CD5FF) left bottom no-repeat,
  linear-gradient(to left, #2CD5FF, #2CD5FF) right bottom no-repeat,
  linear-gradient(to left, #2CD5FF, #2CD5FF) right bottom no-repeat;
  background-size: 4px 20px, 20px 4px, 4px 20px, 20px 4px;
  border: 1px solid #073F97;
  position: relative;
}
.item9 span {
  display: inline-block;
  width: 35%;
  background:#05286C;
  font-size: 14px;
  position: absolute;
  top: 0;
  left: 32%;
  padding: 4px 0px;
  color: #19E8FE;
  border-radius: 0 0 10px 10px;
  text-align: center;
}
</style>
